<template>
  <div class="editviews">
    <div style="margin-bottom: 2.78vw"><navbar></navbar></div>
    <div class="uploaderfile">
    <van-uploader class="uploadimg" preview-size="100vw" :after-read="afterRead" />
    <edit-banner left="头像">
      <img :src="model.user_img" slot="right" v-if="model.user_img">
      <img src="@/assets/head.png" slot="right" v-else>
    </edit-banner>
    </div>
    <edit-banner left="昵称" @bannerClick="show = true">
      <a href="javascript:;" slot="right">{{model.name}}</a>
    </edit-banner>
    <edit-banner left="帐号">
      <a href="javascript:;" slot="right">{{model.username}}</a>
    </edit-banner>
    <edit-banner left="性别" @bannerClick="gendershow = true">
      <a href="javascript:;" slot="right">{{model.gender==1?'男':'女'}}</a>
    </edit-banner>
    <edit-banner left="个性签名"  @bannerClick="textshow = true"></edit-banner>

    <div class="editback" @click="$router.push('userinfo')">返回个人中心</div>


    <van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmClick" @cancel="content = ''">
      <van-field v-model="content" autofocus />
    </van-dialog>

    <van-dialog v-model="textshow" title="个性签名" show-cancel-button @confirm="textareaClick" @cancel="content = ''">
      <van-field v-model="content" type="textarea" autofocus />
    </van-dialog>

    <van-action-sheet v-model="gendershow" cancel-text="取消" :actions="actions" @select="onSelect" />

  </div>
</template>

<script>
import Navbar from "../components/common/Navbar";
import EditBanner from "../components/common/EditBanner";

export default {
name: "edit",
  components: {EditBanner, Navbar},
   data(){
       return {
         model:{},
         actions: [{ name: '男' ,val:1}, { name: '女',val:0 }],
         show:false,
         content:'',
         textshow:false,
         gendershow:false
       }
     },
  methods:{
   async selectUser(){
       const res = await this.$http.get('/user/'+localStorage.getItem('id'))
       this.model=res.data[0]
    },
     async afterRead(file){
      const formdata = new FormData()
      formdata.append('file',file.file)
      const res = await this.$http.post('/upload',formdata)
       this.model.user_img= res.data.url
       this.UserUpdate()
    },
    async UserUpdate(){
     const res =await this.$http.post('/update/'+localStorage.getItem('id'),this.model)
      if(res.data.code ===200)
      this.$msg.fail('修改成功')
    },
    confirmClick(){
      this.model.name =this.content
      this.UserUpdate()
      this.content=''
    },
    textareaClick(){
     this.model.user_desc =this.content
      this.UserUpdate()
      this.content=''
    },
    onSelect(data){
      this.model.gender = data.val
      this.UserUpdate()
      this.gendershow=false
    }
  },
  created() {
  this.selectUser()
  }
}
</script>

<style scoped lang="less">
.editviews{
  a{
    color: #333;
  }
  img{
    height: 11.11vw;
    width: 11.11vw;
    border-radius: 50%;
  }
  .uploaderfile{
    position: relative;
    overflow: hidden;
    .uploadimg{
      opacity: 0;
      position: absolute;
    }
  }
  .editback{
    margin-top:4.17vw;
    background-color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4vw;
    padding: 2.78vw 0;
  }
}
</style>
